@material/radio

What is @material/radio?

@material/radio is a Material Design radio button component for the web. It provides a set of customizable radio buttons that adhere to the Material Design guidelines, ensuring a consistent and visually appealing user interface.

What are @material/radio's main functionalities?

Basic Radio Button

This code sample demonstrates a basic radio button using the @material/radio package. It includes the necessary HTML structure and CSS classes to create a Material Design radio button.

<div class="mdc-form-field">
  <div class="mdc-radio">
    <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
  </div>
  <label for="radio-1">Radio 1</label>
</div>

Disabled Radio Button

This code sample shows how to create a disabled radio button using the @material/radio package. The 'disabled' attribute is added to the input element to make the radio button non-interactive.

<div class="mdc-form-field">
  <div class="mdc-radio">
    <input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" disabled>
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
  </div>
  <label for="radio-2">Radio 2 (Disabled)</label>
</div>

Custom Styling

This code sample demonstrates how to apply custom styling to a radio button using the @material/radio package. Custom CSS is used to change the color of the radio button's outer circle and inner circle.

<style>
  .custom-radio .mdc-radio__background {
    border-color: #ff5722;
  }
  .custom-radio .mdc-radio__inner-circle {
    background-color: #ff5722;
  }
</style>
<div class="mdc-form-field custom-radio">
  <div class="mdc-radio">
    <input class="mdc-radio__native-control" type="radio" id="radio-3" name="radios">
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
  </div>
  <label for="radio-3">Custom Styled Radio</label>
</div>

Other packages similar to @material/radio

react-radio-group

react-radio-group is a React component for creating radio button groups. It provides a simple API for managing radio button states and is highly customizable. Unlike @material/radio, which is based on Material Design guidelines, react-radio-group is more flexible in terms of styling and can be used in various design systems.

antd

Ant Design (antd) is a comprehensive UI library for React that includes a set of high-quality components, including radio buttons. The radio buttons in antd are highly customizable and come with built-in support for themes and internationalization. Compared to @material/radio, antd offers a broader range of components and is designed for enterprise-level applications.

semantic-ui-react

semantic-ui-react is the official React integration for Semantic UI. It provides a set of components, including radio buttons, that follow the Semantic UI design principles. The radio buttons in semantic-ui-react are easy to use and integrate well with other Semantic UI components. Unlike @material/radio, which follows Material Design guidelines, semantic-ui-react follows the Semantic UI design language.

README

Radio Buttons

Radio buttons allow the user to select one option from a set while seeing all available options.

Design & API Documentation

• Material Design guidelines: Selection Controls – Radio buttons
• Demo

Installation

npm install @material/radio

Basic Usage

We recommend using MDC Radio with MDC Form Field for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.

HTML Structure

<div class="mdc-form-field">
  <div class="mdc-radio">
    <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
  </div>
  <label for="radio-1">Radio 1</label>
</div>

Styles

@import "@material/form-field/mdc-form-field";
@import "@material/radio/mdc-radio";

JavaScript Instantiation

The radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating MDCRadio on the mdc-radio element. To activate the ripple effect upon interacting with the label, you must also instantiate MDCFormField on the mdc-form-field element and set the MDCRadio instance as its input.

import {MDCFormField} from '@material/form-field';
import {MDCRadio} from '@material/radio';

const radio = new MDCRadio(document.querySelector('.mdc-radio'));
const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
formField.input = radio;

See Importing the JS component for more information on how to import JavaScript.

Variants

Disabled

To disable a radio button, add the mdc-radio--disabled class to the root element and set the disabled attribute on the <input> element. Disabled radio buttons cannot be interacted with and have no visual interaction effect.

<div class="mdc-form-field">
  <div class="mdc-radio mdc-radio--disabled">
    <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" disabled>
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
  </div>
  <label for="radio-1">Radio 1</label>
</div>

Style Customization

MDC Radio uses MDC Theme's secondary color by default. Use the following mixins to customize it.

Sass Mixins

Mixin	Description
mdc-radio-unchecked-stroke-color($color)	Sets the stroke color of an unchecked radio button
mdc-radio-checked-stroke-color($color)	Sets the stroke color of a checked radio button
mdc-radio-ink-color($color)	Sets the ink color of a radio button
mdc-radio-focus-indicator-color($color)	Sets the color of the focus indicator

Caveat: Edge and CSS Custom Properties

In browsers that fully support CSS custom properties, the above mixins will work if you pass in a MDC Theme property (e.g. primary) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.

MDCRadio Properties and Methods

Property	Value Type	Description
checked	Boolean	Proxies to the foundation's isChecked/setChecked methods
disabled	Boolean	Proxies to the foundation's isDisabled/setDisabled methods
value	String	Proxies to the foundation's getValue/setValue methods

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCRadioAdapter

Method Signature	Description
getNativeControl() => HTMLInputElement?	Returns the native radio control, if available
addClass(className: string) => void	Adds a class to the root element
removeClass(className: string) => void	Removes a class from the root element

MDCRadioFoundation

Method Signature	Description
isChecked() => boolean	Returns whether the native control is checked, or false if there's no native control
setChecked(checked: boolean) => void	Sets the checked value of the native control
isDisabled() => boolean	Returns whether the native control is disabled, or false if there's no native control
setDisabled(disabled: boolean) => void	Sets the disabled value of the native control
getValue() => string	Returns the value of the native control, or null if there's no native control
setValue(value: string) => void	Sets the value of the native control